<!-- 模板 -->
<template>
  <div class="Template">{{ config.template }}</div>
</template>

<script setup name="TemplateView" lang="ts">
import {
  // onBeforeUpdate, // 数据更新前
  // onUpdated, // 数据更新后
  // onBeforeMount, // 组件挂载前
  onMounted, // 组件挂载后
  // onBeforeUnmount, // 组件销毁前
  onUnmounted, // 组件销毁后
  // onErrorCaptured, // 抛出错误时
  reactive,
  // ref,
  // customRef,
  // toRef,
  // toRefs,
  // toRaw,
  // markRaw,
  // computed,
  // watch,
  // provide,
  // inject,
  // defineAsyncComponent,
  // shallowRef,
} from 'vue'

// 数据传递
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

// 事件提交
const emit = defineEmits(['open', 'close'])

// 方法暴露
defineExpose({ init, remove })

// 配置
const { $store, $storeToRefs } = window
const config = reactive({
  template: 'template',
})

// theme主题
const { theme } = $storeToRefs($store)

// 方法
function init() {}
function remove() {}
onMounted(() => init())
onUnmounted(() => remove())
</script>

<style lang="scss" scoped>
:deep(.Template) {
  color: #fff;
}
</style>
